<script setup lang="ts">
import ContentHeroWidget from '@/components/content/ContentHeroWidget.vue';
import FooterWidget from '@/components/home/FooterWidget.vue';
import TopbarWidget from '@/components/home/TopbarWidget.vue';
import { useRoute } from 'vue-router';
import { getPageInfo } from '@/api/portal/category';
import { onMounted, ref, watch } from 'vue';

const category = ref<Record<string, any> | null>(null);
const route = useRoute();

const fetchCategoryData = async () => {
    try {
        const res = await getPageInfo(route.params.id as string);
        category.value = res.data;
    } catch (error) {
        console.error('Error fetching category data:', error);
        // Handle error state here, e.g., show an error message
    }
};

onMounted(fetchCategoryData);

// Watch for changes to the route's id parameter
watch(() => route.params.id, fetchCategoryData);
</script>

<template>
    <div class="bg-surface-0 dark:bg-surface-900">
        <div id="home" class="landing-wrapper overflow-hidden">
            <div class="py-6 px-6 mx-0 md:mx-12 lg:mx-20 lg:px-20 flex items-center justify-between relative lg:static">
                <TopbarWidget />
            </div>
            <template v-if="category">
                <ContentHeroWidget :title="category.cate_name" :ctitle="category.cate_en_name" :cdescription="category.cate_desc" />
                <div class="py-6 px-6 mx-0 mt-20 lg:mx-20" v-html="category.content"></div>
            </template>
            <FooterWidget />
        </div>
    </div>
</template>
